import React, { Component } from 'react';
import './modal.less';
import { Button, Input, Table, Modal} from 'antd';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import LinkButton from '../../components/link-button/linkButton.jsx';
import { reqOrgSearch } from '../../api';
import AddWorkuserForm from './add-workuser-form';

const { confirm } = Modal;

class WorkuserMgtForm extends Component {

  state = {
    userList:[],
    visible: '0',
    loading: false,
  } 

  initColumns = () => {
    this.columns = [
      { title: '姓名', dataIndex: 'name', key: 'name' },
      { title: '所属组织', dataIndex: 'origanize', key: 'origanize',width: 210},
      { title: '职位', dataIndex: 'position', key: 'position' },
      { title: '电话', dataIndex: 'number', key: 'number' },
      { title: '邮箱', dataIndex: 'email', key: 'email' },
      {
        title: '操作',
        dataIndex: '',
        key: 'action',
        width: 200,
        render: () => <LinkButton onClick={ this.showDeleteConfirm }>删除</LinkButton>,  
      },
    ];
  }
  // 获取用户信息列表数据
  getUserList = async() => {   
    this.setState({
      loading:true
    })
    const result = await reqOrgSearch();  //获取用户信息列表
    this.setState({
      loading: false
    })
    const userList = result.data;  // 获取data数据
    this.setState({   // 更新状态
      userList
    })
  }
  

  addShow = () => {
    this.setState({
      visible: '1'
    })
  }
  addUserInfor = () => {
    console.log('addUserInfor()');
  }
  handleCancel = () => {
    this.setState({
      visible: '0'
    })
  }

  showDeleteConfirm = () => {
    confirm({
      title: '您确定要删除该用户吗?',
      icon: <ExclamationCircleOutlined />,
      okText: '删除',
      okType: 'danger',
      cancelText: '取消',
      onOk() {
        console.log('OK');
      },
      onCancel() {
        console.log('Cancel');
      },
    });
  }

  componentWillMount() {
    this.initColumns();
  }
  render() {
    const { visible } = this.state;
    const data = [
      {
        key: 1,
        id: '1',
        name: '1',
        origanize: '1',
        position: '1',
        number: '1',
        email: '1',
        description: '1',
      },
      {
        key: 2,
        id: '2',
        name: '2',
        origanize: '2',
        position: '2',
        number: '2',
        email: '2',
        description: '2',
      },
      {
        key: 3,
        id: '3',
        name: '3',
        origanize: '3',
        position: '3',
        number: '3',
        email: '3',
        description: '3',
      },
      {
        key: 4,
        id: '4',
        name: '4',
        origanize: '4',
        position: '4',
        number: '4',
        email: '4',
        description: '4',
      },
      {
        key: 5,
        id: '5',
        name: '5',
        origanize: '5',
        position: '5',
        number: '5',
        email: '5',
        description: '5',
      },
      {
        key: 6,
        id: '6',
        name: '6',
        origanize: '6',
        position: '6',
        number: '6',
        email: '6',
        description: '6',
      },
      {
        key: 7,
        id: '7',
        name: '7',
        origanize: '7',
        position: '7',
        number: '7',
        email: '7',
        description: '7',
      },
      {
        key: 8,
        id: '8',
        name: '8',
        origanize: '8',
        position: '8',
        number: '8',
        email: '8',
        description: '8',
      },
      {
        key: 9,
        id: '9',
        name: '1',
        origanize: '1',
        position: '1',
        number: '1',
        email: '1',
        description: '1',
      },
      {
        key: 10,
        id: '10',
        name: '2',
        origanize: '2',
        position: '2',
        number: '2',
        email: '2',
        description: '2',
      },
      {
        key: 11,
        id: '11',
        name: '3',
        origanize: '3',
        position: '3',
        number: '3',
        email: '3',
        description: '3',
      },
      {
        key: 12,
        id: '12',
        name: '4',
        origanize: '4',
        position: '4',
        number: '4',
        email: '4',
        description: '4',
      },
      {
        key: 13,
        id: '13',
        name: '5',
        origanize: '5',
        position: '5',
        number: '5',
        email: '5',
        description: '5',
      },
      {
        key: 14,
        id: '14',
        name: '6',
        origanize: '6',
        position: '6',
        number: '6',
        email: '6',
        description: '6',
      },
      {
        key: 1,
        id: '1',
        name: '1',
        origanize: '1',
        position: '1',
        number: '1',
        email: '1',
        description: '1',
      },
      {
        key: 2,
        id: '2',
        name: '2',
        origanize: '2',
        position: '2',
        number: '2',
        email: '2',
        description: '2',
      },
      {
        key: 3,
        id: '3',
        name: '3',
        origanize: '3',
        position: '3',
        number: '3',
        email: '3',
        description: '3',
      },
      {
        key: 4,
        id: '4',
        name: '4',
        origanize: '4',
        position: '4',
        number: '4',
        email: '4',
        description: '4',
      },
      {
        key: 5,
        id: '5',
        name: '5',
        origanize: '5',
        position: '5',
        number: '5',
        email: '5',
        description: '5',
      },
      {
        key: 6,
        id: '6',
        name: '6',
        origanize: '6',
        position: '6',
        number: '6',
        email: '6',
        description: '6',
      },
      {
        key: 7,
        id: '7',
        name: '7',
        origanize: '7',
        position: '7',
        number: '7',
        email: '7',
        description: '7',
      },
      {
        key: 8,
        id: '8',
        name: '8',
        origanize: '8',
        position: '8',
        number: '8',
        email: '8',
        description: '8',
      },
      {
        key: 9,
        id: '9',
        name: '1',
        origanize: '1',
        position: '1',
        number: '1',
        email: '1',
        description: '1',
      },
    ];
    return (
      <div>
        <div style={{height:'45px'}}>
          <h1 className="title title2">工区用户列表</h1>
          <Button type="primary" className='user-header-add' onClick={this.addShow}>添加用户</Button>
        </div>
        <div className="line line1"></div>
        <Table
          columns={this.columns}
          dataSource={data}   // 这里要改为 userList！！！！！！！！！
          //rowKey='_id'  定义每一行的key值
          size='middle'
          pagination={{defaultPageSize: 9}}
          //loading={loading}   
        />

        <Modal
          title="新增用户信息"
          visible={visible === '1'}
          onOk={this.addUserInfor}
          onCancel={this.handleCancel}
          okText="确定"
          cancelText="取消"
          destroyOnClose={true}
        >
          <AddWorkuserForm />   
        </Modal>
      </div>
    )
  }
}

export default WorkuserMgtForm;